import React, { useState } from "react";
import { Button, Layout, Affix, Modal, Form, Input, Space } from "antd";
import Draft from "../../assets/稿定.png";
import { DownOutlined } from "@ant-design/icons";
import "./index.scss";
const { Header, Footer, Content } = Layout;
import hot from "../../assets/hot.png";
import { Flex, Radio } from "antd";
function Enterprise() {
  const headerStyle = {
    display: "flex",
    color: "#fff",
    height: 64,
    paddingInline: 48,
    lineHeight: "64px",
    backgroundColor: "#040404",
    borderBottom: "1px solid #232324",
    paddingLeft: "150px",
    paddingRight: "150px",
  };
  const footerStyle = {
    textAlign: "center",
    color: "#fff",
    backgroundColor: "#4096ff",
    // minHeight: 120,
    // lineHeight: "100px",
  };
  const layoutStyle = {
    display: "flex",
    borderRadius: 8,
    overflow: "hidden",
    width: "calc(100% - 0px)",
    maxWidth: "calc(100% - 0px)",
    height: "calc(100% - 0px)",
    maxHeight: "calc(100% - 0px)",
  };

  const [top, setTop] = useState(0);

  // 产品显示与隐藏
  const [isproduct, setisproduct] = useState(false);
  const onMouseEnterisproduct = () => {
    setisproduct(!isproduct);
  };
  const onMouseLeaveisproduct = () => {
    setisproduct(false);
  };

  // 解决方案显示与隐藏
  const [issolution, setissolution] = useState(false);
  const onMouseEnterissolution = () => {
    setissolution(!issolution);
  };
  const onMouseLeaveissolution = () => {
    setissolution(false);
  };

  // Modal
  const [loading, setLoading] = useState(false);
  const [open, setOpen] = useState(false);
  const showModal = () => {
    setOpen(true);
  };
  const handleOk = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
      setOpen(false);
    }, 1000);
  };
  const handleCancel = () => {
    setOpen(false);
  };
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const options = [
    {
      label: "单人使用",
      value: "单人使用",
    },
    {
      label: "2-20人",
      value: "2-20人",
    },
    {
      label: "20人以上",
      value: "20人以上",
    },
  ];
  const Box = ({ index, onMouseEnter, onMouseLeave, style, isHovered }) => {
    // 根据是否悬停显示不同的文字
    const boxText = isHovered? `Hovered Box ${index}` : `Box ${index}`;
    const boxText1 = [
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        },
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        },
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        },
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        },
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        },
        {
            h1:'01',
            p:'创意供给',
            h11:'创意无法及时满足高频个性化需求?'
        }
    ]
    const boxText2 = [
        {
            h1:'创意供给：海量需求及时满足',
            p:'稿定旗下花瓣、咔神及专业定制设计团队，为企业提供多样、优质创意内容'
        }
    ]
    // const boxText = isHovered? boxText1[index] : boxText2[index];
    return (
        <div
            className="box"
            onMouseEnter={() => onMouseEnter(index)}
            onMouseLeave={onMouseLeave}
            style={style}
        >
            {boxText}
        </div>
    );
};
  const [hoveredIndex, setHoveredIndex] = useState(null);

  const handleMouseEnter = (index) => {
    setHoveredIndex(index);
  };

  const handleMouseLeave = () => {
    setHoveredIndex(null);
  };

  const getBoxStyle = (index) => {
    const currentRow = Math.floor(index / 3);
    const hoveredRow =
      hoveredIndex !== null ? Math.floor(hoveredIndex / 3) : null;

    if (hoveredIndex === null) {
      return { width: "10px" }; // 默认宽度
    }

    if (currentRow === hoveredRow) {
      // 当前行
      if (index === hoveredIndex) {
        return { width: "250px" }; // 鼠标移入的盒子宽度
      } else if (index === currentRow * 3) {
        return { width: "100px" }; // 该行第一个盒子
      } else {
        return { width: "10px" }; // 该行其他两个盒子
      }
    }

    return { width: "100px" }; // 不在当前行的盒子默认宽度
  };
  return (
    <div>
      <Layout style={layoutStyle}>
        <Affix offsetTop={top}>
          <Header style={headerStyle}>
            <img
              src={Draft}
              alt=""
              style={{ height: "40px", marginTop: "13px", marginRight: "20px" }}
            />
            <ul className="ul">
              <li onMouseEnter={onMouseEnterisproduct}>
                产品
                <DownOutlined
                  style={{ fontSize: "15px", padding: "3px 10px" }}
                />
              </li>
              {/* 产品 */}
              {isproduct && (
                <div className="product" onMouseLeave={onMouseLeaveisproduct}>
                  <div className="content">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>创意供给</p>
                        <p>1.3%亿+版权素材，个性化定制满足多样需求</p>
                        <p>
                          花瓣设计大赛&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>定制设计</p>
                        <p>
                          花瓣版权素材&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>咔神商品图智能拍摄</p>
                      </dd>
                    </dl>
                  </div>
                  <div className="content content1">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>内容生产</p>
                        <p>零门槛智能设计工具，人人皆可设计</p>
                        <p>30w+版权模版</p>
                        <p>
                          智能编辑器&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>
                          智能设计工具&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>专业级在线设计工具</p>
                      </dd>
                    </dl>
                  </div>
                  <div className="content content2">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>资产管理</p>
                        <p>数字资产管理，品牌合规管控</p>
                        <p>资产云端管理</p>
                        <p>
                          团队协作提效&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>
                          品牌合规管控&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>角色权限管理</p>
                      </dd>
                    </dl>
                  </div>
                  <div className="content content3">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>营销应用</p>
                        <p>内容极速应用，赋能全域增长</p>
                        <p>电商平台投放</p>
                        <p>
                          新媒体平台投放&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>智慧屏幕营销</p>
                      </dd>
                    </dl>
                  </div>
                  <div className="content content4">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>效果监测</p>
                        <p>数据驱动优化，提升营销效果</p>
                        <p>可视化数据</p>
                        <p>
                          全链路监测&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>
                          H5营销效果监测&ensp;
                          <img src={hot} alt="" />
                        </p>
                      </dd>
                    </dl>
                  </div>
                  <div className="content content5">
                    <dl>
                      <dt>
                        <img
                          src=""
                          alt=""
                        />
                      </dt>
                      <dd>
                        <p>系统定制</p>
                        <p>私有化部署，打造专属数字化内容中台</p>
                        <p>企业系统集成</p>
                        <p>
                          功能定制开发&ensp;
                          <img src={hot} alt="" />
                        </p>
                        <p>数据本地部署</p>
                      </dd>
                    </dl>
                  </div>
                </div>
              )}
              <li onMouseEnter={onMouseEnterissolution}>
                解决方案
                <DownOutlined
                  style={{ fontSize: "15px", padding: "3px 10px" }}
                />
              </li>
              {issolution && (
                <div className="solution" onMouseLeave={onMouseLeaveissolution}>
                  <div className="solution-left">
                    <p>行业方案</p>
                    <div className="top">
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>零售行业</p>
                          <p>减少重复工作，赋能运营提质增效</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>科技行业</p>
                          <p>解放重复设计，提升运营效率</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>汽车行业</p>
                          <p>解放设计人力，赋能私域营销</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>服饰行业</p>
                          <p>内容高效流通，商品统一管理</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>家电行业</p>
                          <p>赋能下游与终端，快速开展区域营销</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>教培行业</p>
                          <p>企业专属模板，资产云端统一存储</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>融媒体行业</p>
                          <p>零门槛图文编辑，采编创作更高效</p>
                        </dd>
                      </dl>
                    </div>
                    <p>场景方案</p>
                    <div className="bottom">
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                      <dl>
                        <dt>
                          <img
                            src=""
                            alt=""
                          />
                        </dt>
                        <dd>
                          <p>金融行业</p>
                          <p>提升内容生产力，加强品牌建设</p>
                        </dd>
                      </dl>
                    </div>
                  </div>
                  <div className="solution-right">
                    <img
                      src="https://cdn.dancf.com/fe-assets/20240330/c8faaa7581f6e097747b74d68cb812af.png"
                      alt=""
                    />
                  </div>
                </div>
              )}

              <li>开放平台</li>
              <li>渠道合作</li>
              <li>了解稿定</li>
            </ul>
            <Button
              type="primary"
              style={{ marginLeft: "480px", marginTop: "15px", width: "100px" }}
            >
              立即体验
            </Button>
          </Header>
        </Affix>

        <Content className="contentStyle">
          <div className="contentStyle-content">
            <div className="center-right">
              <video autoPlay muted loop>
                <source src="https://cdn.dancf.com/fe-assets/20231204/ac0f2eb25a81c4ec41964ed319a08eb7.webm" />
              </video>
              <div className="center-left">
                <h1>视觉内容创新方案</h1>
                <h1>驱动企业营销增长</h1>
                <p>全链路数字化内容中台，助力企业营销降本增效，为数字化时代</p>
                <p>快速迭代的内容营销持续赋能</p>
                <img
                  src="https://cdn.dancf.com/iliad/dist/prod/577/dist/images/49cb331f-096d-42e2-8369-af837ee144d9.webp"
                  alt=""
                  style={{ width: "150px", height: "40px", cursor: "pointer" }}
                  onClick={showModal}
                />
                <h3 onClick={showModal}>立即咨询</h3>
              </div>
            </div>
          </div>
          <div className="contentStyle-center">
            <h1
              style={{ color: "#fff", fontSize: "40px", textAlign: "center" }}
            >
              从创作到应用
            </h1>
            <h1
              style={{ color: "#fff", fontSize: "40px", textAlign: "center" }}
            >
              打造视觉内容新体验
            </h1>
            <img
              src="https://cdn.dancf.com/iliad/dist/prod/577/dist/images/49cb331f-096d-42e2-8369-af837ee144d9.webp"
              alt=""
              style={{
                width: "150px",
                height: "40px",
                cursor: "pointer",
                marginLeft: "670px",
              }}
            />
            <h3>获取演示</h3>
          </div>
          <div className="contentStyle-bottom">
            <h1>一站式服务</h1>
            <h1>搭建企业视觉内容新基建</h1>
            {/* <div className="contentStyle-bottom-bottom"> */}
              <div className="container">
                <div className="row">
                  {[0, 1, 2].map((index) => (
                    <Box
                      key={index}
                      index={index}
                      onMouseEnter={handleMouseEnter}
                      onMouseLeave={handleMouseLeave}
                      style={getBoxStyle(index)}
                      isHovered={index === hoveredIndex}
                    />
                  ))}
                </div>
                <div className="row">
                  {[3, 4, 5].map((index) => (
                    <Box
                      key={index}
                      index={index}
                      onMouseEnter={handleMouseEnter}
                      onMouseLeave={handleMouseLeave}
                      style={getBoxStyle(index)}
                      isHovered={index === hoveredIndex}
                    />
                  ))}
                </div>
              </div>
              {/* 01 */}
              {/* <div className="creative">
                <div>
                  <h1 className="num">01</h1>
                <p>创意供给</p>
                <h1>
                  创意无法及时满足
                  <br />
                  高频个性化需求?
                </h1>
                </div>
                
                <div className="creative1">
                  <h1>创意供给：海量需求及时满足</h1>
                  <p>
                    稿定旗下花瓣、咔神及专业定制设计团队，为企业提供多样、优质创意内容
                  </p>
                  <div className="creative1-1">
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/5e6e680fe476952a63bb6855e39230a6.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/7508f66bbf24f359c3f7881f8799a785.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div> */}

              {/* 02 */}
              {/* <div className="production">
                <h1 className="num">02</h1>
                <p>内容生产</p>
                <h1>
                  如何用设计工具提
                  <br />
                  升内容生产效率?
                </h1>
                <div className="creative1">
                  <h1>创意供给：海量需求及时满足</h1>
                  <p>
                    稿定旗下花瓣、咔神及专业定制设计团队，为企业提供多样、优质创意内容
                  </p>
                  <div className="creative1-1">
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/5e6e680fe476952a63bb6855e39230a6.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/7508f66bbf24f359c3f7881f8799a785.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div> */}
              {/* 03 */}
              {/* <div className="asset">
                <h1 className="num">03</h1>
                <p>资产管理</p>
                <h1>
                  内容资产如何协用
                  <br />
                  管理、高效复用?
                </h1>
                <div className="creative1">
                  <h1>创意供给：海量需求及时满足</h1>
                  <p>
                    稿定旗下花瓣、咔神及专业定制设计团队，为企业提供多样、优质创意内容
                  </p>
                  <div className="creative1-1">
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/9220848db02dc7fc8efbe325bfded7f1.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/5e6e680fe476952a63bb6855e39230a6.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                    <dl>
                      <dt>
                        <img src="https://cdn.dancf.com/fe-assets/20231121/assets/7508f66bbf24f359c3f7881f8799a785.png" alt="" />
                      </dt>
                      <dd>
                        <h6>定制设计</h6>
                        <p>量身打造专属方案</p>
                      </dd>
                    </dl>
                  </div>
                </div>
              </div> */}
              {/* 04 */}
              {/* <div className="marketing">
                <h1 className="num">04</h1>
                <p>营销应用</p>
                <h1>
                  营销内容如何多平
                  <br />
                  台高效应用?
                </h1>
              </div> */}
              {/* 05 */}
              {/* <div className="effect">
                <h1 className="num">05</h1>
                <p>效果检测</p>
                <h1>
                  如何借助数据
                  <br />
                  反哺内容优化?
                </h1>
              </div> */}
              {/* 06 */}
              {/* <div className="customizing">
                <h1 className="num">06</h1>
                <p>系统定制</p>
                <h1>
                  企业个性化需求
                  <br />
                  如何满足?
                </h1>
              </div> */}
            </div>
          {/* </div> */}
        </Content>
        <Modal
          open={open}
          title="立即申请产品试用"
          onOk={handleOk}
          onCancel={handleCancel}
          footer={null}
          width={450}
        >
          <Form
            labelWrap={true}
            name="validateOnly"
            layout="vertical"
            autoComplete="off"
            labelCol={{
              span: 10,
            }}
            wrapperCol={{
              span: 30,
            }}
            style={{
              maxWidth: 600,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="姓名"
              name="username"
              // style={{height:'40px',marginTop:'-5px'}}
              rules={[
                {
                  required: true,
                  message: "请输入您的姓名",
                },
              ]}
            >
              <Input style={{ height: "20px", marginTop: "-5px" }} />
            </Form.Item>

            <Form.Item
              label="手机号"
              name="phone"
              // style={{height:'40px',marginTop:'-5px'}}
              rules={[
                {
                  required: true,
                  message: "请输入正确的手机号",
                },
              ]}
            >
              <Input style={{ height: "20px", marginTop: "-5px" }} />
            </Form.Item>

            <Form.Item
              label="企业名称"
              name="phone"
              // style={{height:'40px',marginTop:'-5px'}}
              rules={[
                {
                  required: true,
                  message: "请输入您所在的企业名称",
                },
              ]}
            >
              <Input style={{ height: "20px", marginTop: "-5px" }} />
            </Form.Item>

            <Form.Item
              label="需要使用产品的人数"
              name="num"
              rules={[
                {
                  required: true,
                  message: "请选择需要使用产品的人数",
                },
              ]}
            >
              <Radio.Group
                block
                options={options}
                defaultValue="Apple"
                optionType="button"
                buttonStyle="solid"
              />
            </Form.Item>

            <Form.Item label={null}>
              <Button
                type="primary"
                htmlType="submit"
                style={{ width: "400px", marginLeft: "-165px" }}
              >
                提交
              </Button>
            </Form.Item>
          </Form>
        </Modal>

        <Footer style={footerStyle}>123</Footer>
      </Layout>
    </div>
  );
}

export default Enterprise;
